<template>
  <el-container class="profile-container">
    <el-aside class="profile-aside">
      <img src="../assets/plane.jpg" alt="Profile Image" class="profile-image" />
    </el-aside>
    <el-main class="profile-main">
      <div class="profile-info">
        <h2>{{userId}}</h2>
        <p>{{email}}</p>
        <!-- 表单区域 -->
        <el-form ref="changePersonInfoFormRef"
                 :model="usingPersonalInfoForm"
                 :rules="changePersonInfoFormRules"
                 label-width="0px" class="login_form">
          <el-form-item prop="newUserId"><!-- 用户名 -->
            <el-input placeholder="请输入新用户名"   :prefix-icon="UserFilled" size="large" v-model="usingPersonalInfoForm.newUserId" >
            </el-input>
          </el-form-item>
          <el-form-item prop="newPassword"><!-- 密码 -->
            <el-input  type="password" placeholder="请输入新密码" :prefix-icon="MoreFilled" size="large" v-model="usingPersonalInfoForm.newPassword"></el-input>
          </el-form-item>
          <el-form-item prop="newEmail"><!-- 邮箱 -->
            <el-input   placeholder="请输入新邮箱" :prefix-icon="Message" size="large" v-model="usingPersonalInfoForm.newEmail" ></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" class="changePersonalInfoBtn" @click="changePersonalInfo">修改个人信息</el-button>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import {Message, MoreFilled, UserFilled} from "@element-plus/icons-vue";
import axios from "axios";

export default {
  computed: {
    Message() {
      return Message
    },
    MoreFilled() {
      return MoreFilled
    },
    UserFilled() {
      return UserFilled
    }
  },
  data(){
    return{
      userId:'',
      email:'',
      password:'',
      usingPersonalInfoForm:{
        newUserId:'',
        newPassword:'',
        newEmail:'',
      },
      changePersonInfoForm:{
        oldUserId:'',
        newUserId:'',
        newPassword:'',
        newEmail:'',
      },
      changePersonInfoFormRules:{
        //用户名是否合法
        newUserId:[
          {min:3,max:12,message: '请输入用户名长度为3到12个字符',trigger:'blur'},
        ],
        //验证密码是否合法
        newPassword:[
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ],
      },
    }
  },
  created() {
    const storedUserId = window.sessionStorage.getItem('userId');
    console.log(storedUserId);

    if (storedUserId) {
      axios.post("http://localhost:8000/users/personal", {
          userId: storedUserId,
        headers: {
          'Content-Type': 'application/json'
        }
      })
          .then(response => {
            const res = response.data;
            if (response.status === 200) {
              console.log(res);
              this.userId = res.user.userId;
              this.password=res.user.password;
              this.email = res.user.email;
              this.changePersonInfoForm.newUserId=this.userId;
              this.changePersonInfoForm.newPassword=this.password;
              this.changePersonInfoForm.newEmail=this.email;
              this.changePersonInfoForm.oldUserId=this.userId;
            }
          })
          .catch(error => {
            if (error.response) {
              // 请求已发出，但服务器响应状态码不在2xx范围内
              console.error('响应错误', error.response.data);
            } else if (error.request) {
              // 请求已发出但没有收到响应
              console.error('请求错误', error.request);
            } else {
              // 发生在设置请求时触发的错误
              console.error('错误', error.message);
            }
          });
    }
  },
  methods:{
    async changePersonalInfo() {
      this.changePersonInfoForm.newUserId = this.usingPersonalInfoForm.newUserId || this.changePersonInfoForm.newUserId;
      this.changePersonInfoForm.newPassword = this.usingPersonalInfoForm.newPassword || this.changePersonInfoForm.newPassword;
      this.changePersonInfoForm.newEmail = this.usingPersonalInfoForm.newEmail || this.changePersonInfoForm.newEmail;
      console.log(this.changePersonInfoForm);
      await this.$refs.changePersonInfoFormRef.validate(async (valid) => {
        if (valid) {
          this.$message.success('个人信息修改成功');
          // 执行修改个人信息的逻辑
          const {data: res} = await axios.post("http://localhost:8000/users/changePersonalInfo", this.changePersonInfoForm, {
            headers: {
              'Content-Type': 'application/json'
            }
          })
          if (res.status === 200) {
            console.log(res);
            this.userId = res.data.user.userId;
            this.email = res.data.user.email;
            this.password=res.data.user.password;
            // 更新 sessionStorage 中的 userId 值
            window.sessionStorage.setItem('userId', res.data.user.userId);
            // 清空表单
            this.$refs.changePersonInfoFormRef.resetFields();
          }
        } else {
          this.$message.error('请填写所有必填字段');
        }
      });
      },
  },
}
</script>

<style scoped>
.profile-container {
  display: flex;
  height: 91.6vh;
}

.profile-aside {
  width: 50%;
  background-color: #2c3e50;
  display: flex;
  justify-content: center;
  align-items: center;

}

.profile-image {
  width: 100%;
  height: 100%;
}

.profile-main {
  width: 50%;
  background-color: #ecf0f1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile-info {
  text-align: center;
}

.profile-info h2 {
  margin: 0;
  font-size: 2em;
}

.profile-info p {
  color: #95a5a6;
  font-size: 1.2em;
}

.stat span:first-child {
  display: block;
  color: #95a5a6;
}

.stat span:last-child {
  font-size: 1.5em;
  font-weight: bold;
}

</style>
